<ion-header>
    <ion-toolbar>
        <ion-title>
            <h1>{{ 'addon.mod_workshop.userplan' | translate }}</h1>
        </ion-title>
        <ion-buttons slot="end">
            <ion-button fill="clear" (click)="closeModal()" [ariaLabel]="'core.close' | translate">
                <ion-icon name="fas-xmark" slot="icon-only" aria-hidden="true" />
            </ion-button>
        </ion-buttons>
    </ion-toolbar>
</ion-header>
<ion-content>
    <ion-list>
        <ng-container *ngFor="let phase of phases">
            <ion-item-divider [attr.aria-current]="workshopPhase === phase.code ? 'page' : 'false'">
                <ion-label>
                    <h2>{{ phase.title }}</h2>
                    <p class="ion-text-wrap" *ngIf="workshopPhase === phase.code">
                        {{ 'addon.mod_workshop.userplancurrentphase' | translate }}
                    </p>
                </ion-label>
            </ion-item-divider>
            <ion-item class="ion-text-wrap" *ngIf="phase.switchUrl" [href]="phase.switchUrl" [detail]="false" core-link [capture]="false">
                <ion-icon slot="start" name="fas-right-left" aria-hidden="true" />
                <ion-label>
                    <p>{{ 'addon.mod_workshop.switchphase' + phase.code | translate }}</p>
                </ion-label>
                <ion-icon slot="end" name="fas-up-right-from-square" aria-hidden="true" />
            </ion-item>
            <ion-item class="ion-text-wrap" *ngFor="let task of phase.tasks"
                [class.item-dimmed]="phase.code !== workshopPhase || (task.code === 'submit' && !showSubmit)" (click)="runTask(task)"
                [detail]="false" button>
                <ion-icon slot="start" name="far-circle" *ngIf="task.completed === null"
                    [attr.aria-label]="'addon.mod_workshop.tasktodo' | translate" />
                <ion-icon slot="start" name="fas-circle-xmark" color="danger" *ngIf="task.completed === ''"
                    [attr.aria-label]="'addon.mod_workshop.taskfail' | translate" />
                <ion-icon slot="start" name="fas-circle-info" color="info" *ngIf="task.completed === 'info'"
                    [attr.aria-label]="'addon.mod_workshop.taskinfo' | translate" />
                <ion-icon slot="start" name="fas-circle-check" color="success" *ngIf="task.completed === '1'"
                    [attr.aria-label]="'addon.mod_workshop.taskdone' | translate" />
                <ion-label>
                    <p class="item-heading ion-text-wrap">{{task.title}}</p>
                    <p *ngIf="task.details" [innerHTML]="task.details"></p>
                </ion-label>
                <ion-icon slot="end" *ngIf="task.link && task.code !== 'submit'" name="fas-up-right-from-square" aria-hidden="true" />
            </ion-item>
        </ng-container>
    </ion-list>
</ion-content>
